
console.log('我是main.js')

//请求page
let n=2
getPage.onclick = () => {
    const request = new XMLHttpRequest()
    request.open('GET', `/page${n}.json`)
    request.onreadystatechange = () => {
        if (request.readyState === 4 && request.status === 200) {
            const array=JSON.parse(request.response) //转换成数组
            array.forEach(item => { //遍历数组
                const li=document.createElement('li')
                li.textContent=item.id
                xxx.appendChild(li)
            })
        }
    }
    request.send()
    n+=1
}

//请求jsons
getJSON.onclick = () => {
    const request = new XMLHttpRequest()
    request.open('GET', '/5.json')
    request.onreadystatechange = () => {
        if (request.readyState === 4 && request.status >= 200 && request.status <= 300) {
            const object = JSON.parse(request.response)
            console.log(object)
        }
    }
    request.send()
}

//请求xml
getXML.onclick = () => {
    const request = new XMLHttpRequest()
    request.open('GET', '/4.xml')
    request.onreadystatechange = () => {
        if (request.readyState === 4 && request.status <= 300 && request.status >= 200) {
            const dom = request.responseXML
            const text = dom.getElementsByTagName('warning')[0].textContent
            console.log(text.trim())
        }
    }
    request.send()
}
//请求html
getHTML.onclick = () => {
    const request = new XMLHttpRequest()
    request.open('GET', '/3.html')
    request.onreadystatechange = () => {
        //用onreadystatechange的状态码来判断是否下载完成，替代onload和onerror
        if (request.readyState === 4) {
            if (request.status >= 200 && request.status <= 300) {//用状态码来监听是否请求成功
                const div = document.createElement('div')
                div.innerHTML = request.response
                document.body.appendChild(div)
            } else {
                alert('加载3.html失败')
            }
        }
    }
    // request.onload=()=>{  //onload和onerror不能很好的匹配没有加载成功的情况，所以一般不用这个
    //     const div=document.createElement('div')
    //     div.innerHTML=request.response
    //     document.body.appendChild(div)
    // }
    // request.onerror=()=>{}
    request.send()
}

//请求js
getJS.onclick = () => {
    const request = new XMLHttpRequest()
    request.open('GET', '/2.js')
    request.onload = () => {
        console.log(request.response)
        const script = document.createElement('script')
        script.innerHTML = request.response
        document.body.appendChild(script)
    }
    request.onerror = () => {
        console.log('失败了')
    }
    request.send()
}

//请求css
getCSS.onclick = () => { //点击按钮之后，请求CSS
    const request = new XMLHttpRequest() //创建HttpRequest对象
    request.open('GET', '/style.css') //调用对象的open方法
    request.onload = () => { //监听对象的onload事件
        console.log(request.response) //打印请求的响应内容
        const style = document.createElement('style')  //创建一个style标签
        style.innerHTML = request.response //让style标签的内容等于request的相应内容
        document.head.appendChild(style) //把style标签插到head里面
    }
    request.onerror = () => {//监听对象的onerror事件
        console.log('失败了')
    }
    request.send() //调用对象的send方法
}
